<template>
<div class="position row no-wrap">
  <div class="pos scrollbar" v-if="!isSearch">
    <div v-for="(path, pathIndex) in pathArr" :key="pathIndex" @click="goto(pathIndex)"
          class="path-txt" :class="pathIndex!==pathArr.length-1?'cursor-pointer':''">
      <div class="text-ellipsis" style="maxWidth: 120px">
        {{path}}
        <q-tooltip>{{path}}</q-tooltip>
      </div>
      <div>/</div>
    </div>
  </div>
  <q-space />
  <span v-show="total >= 0 && (position.length > 0 || isSearch)" class="total">已全部加载，共{{total}}个</span>
</div>
</template>

<script>
export default {
  name: 'position',
  props: {
    position: {
      type: String
    },
    isSearch: { // 新增 如果是查询的话 隐藏全部文件的显示
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    pathArr () {
      let path
      if (this.position[this.position.length - 1] === '/') {
        path = this.position.substring(0, this.position.length - 1)
      } else {
        path = this.position
      }
      return path.split('/')
    }
  },
  methods: {
    goto (pathIndex) {
      this.$emit('goto', pathIndex)
    }
  }
}
</script>

<style scoped lang="stylus">
.position{
  padding 0 20px
  height 40px
  line-height 39px
  border-bottom 1px solid #d3d3d3
  background-color #F3F3F3
  .pos{
    display flex
    overflow-x auto
  }
  .path-txt{
    display flex
    color $primary
    &:last-child{
      color #333
    }
  }
  .total{
    min-width 150px
    margin-left 10px
  }
}
</style>
